<template>
  <el-pagination
    background
    :pager-count="9"
    popper-class="x"
    layout="prev, pager, next, jumper"
    hide-on-single-page
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="changePage"
  >
  </el-pagination>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    currentPage: {
      type: Number as PropType<number>,
      required: true
    },
    pageSize: {
      type: Number as PropType<number>,
      required: true
    },
    total: {
      type: Number as PropType<number>,
      required: true
    }
  },
  emits: ['update:current-page', 'update:page-size'],
  setup(props, { emit }) {
    const changePage = (page: number) => {
      emit('update:current-page', page)
    }
    return { changePage }
  }
})
</script>

<style scoped>
.el-pagination {
  margin-top: 15px;
}
</style>